<!--  @author:ymy  -->
<template>
  <div class="school">
    <div class="img-item">
      <img src="https://assets-cdn.lanqb.com/imgv3_m/images/t-banner.png" alt="" />
    </div>
    <div class="submenu">
      <div class="menu-item">
        <span>
          <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h1-b_2211.png" alt="" />
        </span>
        <span>网校课程</span>
      </div>
      <div class="menu-item">
        <span>
          <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h4-g_2211.png" alt="" />
        </span>
        <span>企业荣誉</span>
      </div>
      <div class="menu-item">
        <span>
          <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h3-p_2211.png" alt="" />
        </span>
        <span>学员作品</span>
      </div>
      <div class="menu-item">
        <span>
          <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h4-g_2211.png" alt="" />
        </span>
        <span>333333333333333333333333333333333333333</span>
      </div>
      <div class="menu-item">
        <span>
          <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/submenu/h8-c_2211.png" alt="" />
        </span>
        <span>特训班</span>
      </div>
    </div>
    <school-teach :series="series" />
    <div class="teacher">
      <ProTitle :title="teacherTitle" />
      <div class="teacher-content">
        <div class="t-content-item" v-for="item in teachers" :key="item.teacher_id">
          <img :src="'https://ss.lanqb.com/' + item.user.avatar" :alt="item.user.nickname" />
          <h4>
            <span>{{ item.user.nickname }}<van-icon color="#edce8c" name="certificate" /></span>
          </h4>
          <p>行业经验：{{ item.seniority }}年</p>
        </div>
      </div>
    </div>
    <div class="stuThank">
      <ProTitle :title="stuThank" />
      <div class="stuContent" v-for="items in stuThanks" :key="items.id">
        <div class="stuImg">
          <img :src="'https://ss.lanqb.com/' + items.avatar" alt="" />
        </div>
        <div class="stuText">
          <p>
            <strong>{{ items.name }}:</strong>
            {{ items.content.slice(0, 78) }}...
          </p>
        </div>
      </div>
    </div>
    <div class="stuShow">
      <ProTitle :title="stuShow" />
      <div class="showContent">
        <div class="showImg" v-for="item in stuShows" :key="item.id">
          <img :src="'https://ss.lanqb.com/' + item.work_url + '?imageView2/1/w/230/h/172'" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SchoolTeach from './SchoolTeach';
import ProTitle from '../Home/ProTitle';
export default {
  name: 'School',
  data() {
    return {
      teacherTitle: '优秀师资',
      stuThank: '学员感言',
      stuShow: '学员作品',
      series: [],
      teachers: [],
      stuThanks: [],
      stuShows: []
    };
  },
  async created() {
    const { data } = await this.axiosRq('/lqb/api/school/professionals?limit=4', 'GET');
    const data1 = await this.axiosRq('/lqb/api/school/teacher?limit=3', 'GET');
    const data2 = await this.axiosRq('/lqb/api/school/testimoniales?limit=3', 'GET');
    const data3 = await this.axiosRq('/lqb//api/school/works?limit=9&sort=-top_weight', 'GET');
    this.teachers = data1.data;
    this.stuThanks = data2.data;
    this.stuShows = data3.data;
    this.series = data;
  },
  components: {
    SchoolTeach,
    ProTitle
  }
};
</script>
<style lang="less" scoped>
.school {
  margin-top: 0.44rem;
  font-size: 0.2rem;
  background-color: #f4f4f4;
  margin-bottom: 0.5rem;
  > .img-item {
    height: 0.66rem;
    padding: 0.025rem 0;
    background-color: white;
    img {
      display: block;
      margin: 0 auto;
      width: 3.295rem;
      height: 0.66rem;
    }
  }
  > .submenu {
    width: 100vw;
    height: 0.74rem;
    background-color: white;
    display: flex;
    justify-content: space-around;
    padding: 0.17rem 0 0.1rem 0;
    > .menu-item {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 0.12rem;
      img {
        width: 0.43rem;
        height: 0.43rem;
      }
    }
  }
  > .teacher {
    background-color: white;
    margin-bottom: 0.1rem;
    > .teacher-content {
      width: 100vw;
      height: 1.53rem;
      display: flex;
      > .t-content-item {
        width: 1.25rem;
        height: 1.32rem;
        padding: 0.1rem 0;
        text-align: center;
        img {
          width: 0.84rem;
          height: 0.84rem;
          border-radius: 50%;
        }
        h4 {
          font-size: 0.16rem;
          color: #222222;
          font-weight: 400;
        }
        p {
          font-size: 0.12rem;
          color: #a4a4a4;
        }
      }
    }
  }
  > .stuThank {
    background-color: white;
    margin-bottom: 0.1rem;
    > .stuContent {
      display: flex;
      width: 3.55rem;
      height: 0.72rem;
      margin: 0 auto;
      padding: 0.1rem 0;
      border-bottom: 1px solid #e6e6e6;
      > .stuImg {
        width: 0.71rem;
        height: 0.71rem;
        img {
          width: 0.71rem;
          height: 0.71rem;
        }
      }
      > .stuText {
        height: 0.72rem;
        font-size: 0.12rem;
        margin-left: 0.05rem;
        p {
          display: inline-block;
          line-height: 1.5;
        }
      }
    }
  }
  > .stuShow {
    background-color: white;
    > .showContent {
      height: 2.73rem;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0.1rem 0.05rem;
      > .showImg {
        width: 1.15rem;
        height: 0.86rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
